<template>
  <view
    class="banner-container"
    :class="customClass"
    :style="bannerStyle"
  >
    <view
      class="banner-cell"
      :class="cellClass"
    >
      <view
        v-if="showText"
        class="banner-cell__text"
      >
        <view class="banner-cell__title">{{title}}</view>
        <view class="banner-cell__label">{{label}}</view>
      </view>
      <view class="banner-cell__thumb">
        <image
          :src="thumb"
          :mode="mode"
        />
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: 'BannelCell',
  props: {
    customClass: String,
    title: String,
    label: String,
    background: String,
    color: String,
    thumb: {
      type: String,
      default: ''
    },
    mode: {
      type: String,
      default: 'aspectFit'
    },
    showText: {
      type: Boolean,
      default: true
    },
    ratio: Number
  },
  computed: {
    cellClass () {
      let classes = []
      if (this.center) {
        classes.push('banner-cell--center')
      }
      return classes
    },
    bannerStyle () {
      let styles = []
      if (this.background) {
        styles.push(`background: ${this.background}`)
      }
      if (this.color) {
        styles.push(`color: ${this.color}`)
      }
      if (this.ratio > 0) {
        styles.push(`--banner-ratio: ${100 / this.ratio}%`)
      }
      return styles.join(';')
    },
    dummyStyle () {
      let ratio = 100
      if (this.ratio > 0) {
        ratio /= this.ratio
      }
      return `padding-top:${ratio}%`
    },
    boxStyle () {
      if (this.radius) {
        let radius = this.addUnit(this.radius)
        return `border-radius: ${radius}`
      }
      return ''
    },
    coverStyle () {
      if (!this.icon) {
        return ''
      }
      let top = 0
      if (this.ratio > 0) {
        top = (1 - this.ratio) / 2 * 100
      }
      let style = [`top:${top}%`]
      if (this.iconSize === 'large') {
        style.push(`transform: scale(0.3)`)
      }
      return style.join(';')
    }
  },
  methods: {
    addUnit (value) {
      if (value) {
        return /^\d+(\.\d+)?$/.test(value) ? value + 'px' : value
      }
      return undefined
    }
  }
}
</script>

<style lang="less">
.banner {
  &-container {
    position: relative;
    width: 100%;
    &:root {
      --banner-ratio: 32%;
    }
    &::after {
      display: block;
      content: "";
      padding-top: var(--banner-ratio);
    }
  }
  &-cell {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    display: flex;
    padding: 20px 30px;
    &__text,
    &__thumb {
      flex: 1;
    }
    &__thumb {
      image {
        width: 100%;
        height: 100%;
      }
    }
    &__title {
      font-size: 25px;
    }
    &__label {
      font-size: 12px;
      opacity: 0.6;
    }
  }
}
</style>
